{extend name='main'}

<div class="layui-card">
    <div class="layui-card-header">设备统计概览</div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body text-center">
                        <div class="layui-font-32 layui-text-blue">{$statistics.total}</div>
                        <div class="layui-text-muted">设备总数</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body text-center">
                        <div class="layui-font-32 layui-text-green">{$statistics.online}</div>
                        <div class="layui-text-muted">在线设备</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body text-center">
                        <div class="layui-font-32 layui-text-red">{$statistics.offline}</div>
                        <div class="layui-text-muted">离线设备</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body text-center">
                        <div class="layui-font-32 layui-text-orange">{$statistics.enabled}</div>
                        <div class="layui-text-muted">启用设备</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-header">设备状态分布</div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md6">
                <div id="onlineChart" style="height: 300px;"></div>
            </div>
            <div class="layui-col-md6">
                <div id="statusChart" style="height: 300px;"></div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="script"}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
$(function() {
    // 在线状态图表
    var onlineChart = echarts.init(document.getElementById('onlineChart'));
    var onlineOption = {
        title: {
            text: '设备在线状态',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
            name: '设备状态',
            type: 'pie',
            radius: '50%',
            data: [
                {value: {$statistics.online}, name: '在线', itemStyle: {color: '#5FB878'}},
                {value: {$statistics.offline}, name: '离线', itemStyle: {color: '#FF5722'}}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    onlineChart.setOption(onlineOption);

    // 启用状态图表
    var statusChart = echarts.init(document.getElementById('statusChart'));
    var statusOption = {
        title: {
            text: '设备启用状态',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [{
            name: '设备状态',
            type: 'pie',
            radius: '50%',
            data: [
                {value: {$statistics.enabled}, name: '启用', itemStyle: {color: '#1E9FFF'}},
                {value: {$statistics.disabled}, name: '禁用', itemStyle: {color: '#FFB800'}}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    statusChart.setOption(statusOption);

    // 响应式调整
    window.addEventListener('resize', function() {
        onlineChart.resize();
        statusChart.resize();
    });
});
</script>
{/block}
